<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据节点信息查找</title>
  <script>
    function f1(){
    //   找到id属性值为btn的元素，只返回一个对象
    //   语法:document.getElementById("id属性值")
      let btn=document.getElementById("btn");
      console.log(btn)
      let p1 = document.getElementById("p1");
      console.log(p1)
      let d1 = document.getElementById("d1");
      console.log(d1)
    }
    function f2(){
      // 根据name属性查找元素,可以返回多个
      let n = document.getElementsByName("n");
      console.log(n)
    }
    function f3(){
      //   根据标签查找
      let ds = document.getElementsByTagName("div");
      console.log(ds)
    }
    function f4(){
      //   根据选择器查找
      // 只返回匹配到的第一个元素
      // 参数是选择器
      let c1 = document.querySelector(".c1");
      console.log(c1)
      let ps = document.querySelectorAll("p")
      console.log(ps)
      let ns = document.querySelectorAll("p[name='n']")
      console.log(ns)
    }
  </script>
</head>
<body>
<!--
<div>   <p> <button>等标签元素是“元素节点”
标签之间的内容是“文本节点”
标签上的属性（如id="btn"    class="c1"  name="n")等都是“属性节点”
-->
<!--根据id查找最终会打印出btn,p1,d1-->
<button class="c1" id="btn" onclick="f1()">根据id属性查找对应元素</button>
<button name="n" onclick="f2()">根据name属性查找对应元素</button>
<button name="n" onclick="f3()">根据标签名查找对应元素</button>
<button class="c1" name="n" onclick="f4()">根据选择器查找对应元素</button>
<p class="c1" name="n" id="p1">这是一个段落</p>
<p name="n">第2个段落</p>
<p class="c1">第3个段落</p>
<div id="d1">这是一个div</div>
<div name="n">第2个div</div>
<div>第3个div</div>
</body>
</html>